/*
 * 组件注释
 * @Author: machinist_wq
 * @Date: 2022-06-27 15:32:20
 * @LastEditors: machinist_wq
 * @LastEditTime: 2022-12-29 20:48:17
 * @Description:
 * 人生无常！大肠包小肠......
 */
"use strict";
import React, { FC, ReactElement } from "react";
import { Divider, Collapse } from "antd";
import layoutBox from "@/hook/layoutBox";
import SearchForm from "./searchForm";
import OrderFieldList from "./orderFieldList";
import Ueditor from "./ueditor";
import styles from "./index.less";
import Highlight from "@/component/highlight";
// @ts-ignore
import Tem from "./temp";
import image from "@/assets/images/weixin.png";

const { Panel } = Collapse;

const Title: FC = () => <p className={styles.title}>代码演示</p>;
interface Iprops {
  children: ReactElement | string;
  title?: string;
  text?: string;
}
export const OwnCollapse: FC<Iprops> = (props: Iprops): ReactElement => {
  const { children, title, text } = props;
  return (
    <React.Fragment>
      <Divider
        orientation="left"
        plain
        className={text ? styles.text_divider : styles.notextdivider}>
        {title}
      </Divider>
      {text ? <i className={styles.text}>{text}</i> : text}
      <Collapse className={styles.collapse}>
        <Panel header={"查看代码"} key="1">
          <pre className={styles.pre}>{children}</pre>
          {/* <Highlight code={children as string} language={"javascript"} /> */}
        </Panel>
      </Collapse>
    </React.Fragment>
  );
};

const Index: FC = (): ReactElement => {
  return (
    <div className={styles.components}>
      {/* 这里是组件库q1
      <img src={image} alt="" /> */}
      <div className={styles.content}>
        <Title />
        <p>
          SearchForm组件是简单的form水平布局的搜索组件,支持简单的input、select、date-picker等表单组件;
        </p>
        <SearchForm />

        <Title />
        <p>orderFieldList组件是字段排序组件;</p>
        <OrderFieldList />

        <Title />
        <p>Ueditor组件是基于ueditor封装富文本组件;</p>
        <Ueditor />
      </div>
    </div>
  );
};

export default layoutBox(Index);
